<template>
	<!-- 订单详情 -->
	<view class="content display  displayColumn" v-if="info">
		<u-navbar title="个人中心" @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<view class="appoint_left display  " slot="left">
				<uni-icons type="left" size="18" color="#000"></uni-icons>
			</view>
			<view class="apponit_center display " slot="center">
				<span class="title_txt fontSize font_comm">预约详情</span>
			</view>
		</u-navbar>
		
		<!-- 二维码 -->
		<view class="twocode display  all_item width-100 M-T30">
			<view class="twocode_all  display  displayColumn">
				<view class="one_code display  width-100 all_item displayColumn ">
					<canvas id="qrcode" canvas-id="qrcode" style="width:322rpx;height: 322rpx;margin-top: 30rpx;"></canvas>
					<!-- <img class="imgs M-T40" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.fV28uA3HHHULS6EfCoolFAHaHa?w=169&h=180&c=7&r=0&o=5&pid=1.7" alt="" /> -->
					<span class="fontSize font_comm M-T16">兑换码</span>
					<span class="fontSize font_comm M-T16">{{info.reservationCode}}</span>
					<view class="bottom_code display  width-100 M-T24" v-show="!flag"><span class="fontSize font_comm M-L24">到达门店后请出示该二维码</span><span class="fontSize font_comm M-R24">￥{{info.washOrderAmount}}</span></view>
					<view class="bottom_code display  width-100 M-T24" v-show="flag"><span class="fontSize font_comm M-L24">请于</span><span class="fontSize font_comm M-R24">￥{{info.washOrderAmount}}</span></view>
					<view class="hah display  width-100 M-T12" v-show="flag">
					<span class="fontSize font_comm txt21 M-L24 " >{{info.reservationDay}} <span class="fontSize font_comm txt3 M-L16">{{info.reservationTime.split('-')[1]}}前</span> <span class="fontSize M-L16 font_comm txt4">到达</span> </span>
					</view>	
				</view>
				<!-- 分割线 -->
				<view class="lines M-T20"></view>
				<!-- 列表 -->
				<view class="two_bottom display  width-100 displaycenter_aliem M-T20">
					<span class="fontSize font_comm M-L24">预约洗车站</span>
					<span class="fontSize font_comm M-R24">{{info.stationName}}</span>
				</view>
				<view class="two_bottom display  width-100 displaycenter_aliem M-T20">
					<span class="fontSize font_comm M-L24">门店地址</span>
					<view class="address display ">
						<span class="fontSize font_comm" style="margin-right: 6rpx;">{{info.stationAdress}}</span>
						<img class="M-R24" src="@/static/img2/navigation.png" alt="" />
					</view>
				</view>
				<view class="two_bottom display  width-100 displaycenter_aliem M-T20">
					<span class="fontSize font_comm M-L24">购买项目</span>
					<span class="fontSize font_comm M-R24">{{info.goodsName}}</span>
				</view>
				<view class="two_bottom display  width-100 displaycenter_aliem M-T20">
					<span class="fontSize font_comm M-L24">联系商家</span>
					<!-- <img class="M-R-24" src="@/static/img2/phone.png" alt="" @click="makephone(e)"/> -->
					<uni-icons class="M-R-24" type="phone-filled" @click="makephone(info.workerPhonenumber)" size="20"></uni-icons>
				</view>
				
				<view class="two_bottom display  width-100 displaycenter_aliem M-T20">
					<span class="fontSize font_comm M-L24">支付时间</span>
					<span class="fontSize font_comm M-R24">{{info.createTime}}</span>
				</view>
				<view class="two_bottom display  width-100 displaycenter_aliem M-T20">
					<span class="fontSize font_comm M-L24">支付方式</span>
					<span class="fontSize font_comm M-R24" v-if="info.payType == 3">微信支付</span>
					<span class="fontSize font_comm M-R24" v-if="info.payType == 2">余额支付</span>
				</view>
				<view class="two_bottom display  width-100 displaycenter_aliem M-T20">
					<span class="fontSize font_comm M-L24">订单编号</span>
					<span class="fontSize font_comm M-R24">{{info.outTradeNo}}</span>
				</view>
				<view class="two_bottom display  width-100 displaycenter_aliem M-T20">
					<span class="fontSize font_comm M-L24">洗车车型</span>
					<span class="fontSize font_comm M-R24" v-if="info.artificialCarType ==0">轿车</span>
					<span class="fontSize font_comm M-R24" v-if="info.artificialCarType ==1">SUV</span>
					<span class="fontSize font_comm M-R24" v-if="info.artificialCarType ==2">货车</span>
				</view>
				<view class="two_bottom display  width-100 displaycenter_aliem M-T20">
					<span class="fontSize font_comm M-L24">预约时间</span>
					<span class="fontSize font_comm M-R24">{{info.createTime}}</span>
				</view>
				<!-- 取消预约 -->
				<view class="cancleappoint display  width-100 M-T20" @click="cancle">
					<button class="fontSize font_comm display all_item M-R24">取消预约</button>
				</view>
			</view>
		</view>
		
		<view class="two display displayColumn width-100 M-T36 M-L30" >
			<span class="fontSize font_comm" style="margin-left: 30rpx;">小贴士</span>
			<view class="two_all display displayColumn M-ALL-LR20 M-T20">
				<span class="font_comm fontSize txt1">1.预约后可直接取消，不影响您的下次预约</span>
				<span class="fontSize font_comm txt2">2.门站周围有停车场，凭消费证明可免费停车</span>
			</view>
		</view>
		
	</view>
</template>

<script>
	import UQRCode from '@/utils/uqrcode.js';
	export default {
		data() {
			return {
				info:{},
				id:'',
				flag:true,//精细预约  false普洗预约
				resTIME:'',//预约时间
			}
		},
		onLoad(options) {
			this.id = options.id;
			console.log(this.id)
		},
		onReady() {
			this.$modal.loading('正在加载');
			this.getdetailInfo();
			// 画图
			
		},
		methods: {
			makephone(e){
				let that = this;
				uni.makePhoneCall({
					phoneNumber: `${e}` //仅为示例
				});
			
			},
			getcode(){
				
				// 获取uQRCode实例
				var qr = new UQRCode();
				// 设置二维码内容
				qr.data = this.info.reservationCode;
				// 设置二维码大小，必须与canvas设置的宽高一致
				qr.size = 161;
				// 调用制作二维码方法
				qr.make();
				// 获取canvas上下文
				var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
				// 设置uQRCode实例的canvas上下文
				qr.canvasContext = canvasContext;
				// 调用绘制方法将二维码图案绘制到canvas上
				qr.drawCanvas();
			},
			// 取消预约
			cancle(){
				
					let infos = {
						id:this.id,
						money:this.info.washOrderAmount,
						payType:this.info.payType
					}
					infos = JSON.stringify(infos)
					// 跳转退款页面
					this.$tab.navigateTo(`/packageB/refundView/refundView?info=` + infos);
					
			},
			getdetailInfo(){
				this.$req.get(`/xcx/orderReservation/${this.id}`).then(res=>{
					console.log(res);
					this.$modal.closeLoading();
					this.$modal.closeLoading();
					if(res.data.code==200){
						this.info = res.data.data;
						this.flag = this.info.artificialServiceType == 0 ? false :true
						if(!uni.$u.test.isEmpty(res.data.data.reservationDay)){
							this.resTIME = this.info.reservationDay.split('/')[0] + '-' +this.info.reservationDay.split('/')[1] + this.info.reservationTime
						}
						
						this.getcode();
					}else{
						this.$modal.msg(res.data.msg);
					}
				})
			},
		}
	}
</script>
<style>
	page{
		background: #F4F5FA;
	}
</style>
<style scoped lang="scss">
.content{
	width: 750rpx;
	min-height: 100vh;
}
.title_txt {
		font-size: 32rpx;
		font-weight: 600;
		color: #212121;
	}
	.twocode_all{
		width: 690rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		background: #FFFFFF;
		padding-bottom: 24rpx;
		.one_code{
			.hah{
				width: 690rpx;
				justify-content: flex-start;
				.txt21 {
					font-weight: 600;
					font-size: 28rpx;
					color: #126BC9;
				}
				
				.txt3 {
					font-weight: 600;
					font-size: 28rpx;
					color: #126BC9;
				}
				
				.txt4 {
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
				}
			}
			.bottom_code{
				width: 690rpx;
				justify-content: space-between;
				:nth-child(1){
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
				}
				:nth-child(2){
					font-weight: 600;
					font-size: 24rpx;
					color: #C34439;
				}
				
			}
			:nth-child(1){
				font-weight: 600;
				font-size: 24rpx;
				color: #000000;
			}
			:nth-child(2){
				font-weight: 600;
				font-size: 28rpx;
				color: #000000;
			}
		}
	}
	.imgs{
		width: 322rpx;
		height: 322rpx;
		
	}
	.lines{
		width: 642rpx;
		height: 0rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 2rpx solid #F6F6F6;
		margin-left: 24rpx;
	}
	.two_bottom{
		justify-content:  space-between;
		img{
			width: 24rpx;
			height: 24rpx;
		}
		:nth-child(1){
			font-weight: 400;
			font-size: 24rpx;
			color: #72778A;
		}
		:nth-child(2){
			font-weight: 600;
			font-size: 24rpx;
			color: #212121;
		}
	}
	.address{
		span{
			font-weight: 600;
			font-size: 24rpx;
			color: #212121;
		}
		img{
			width: 28rpx;
			height: 28rpx;
		}
	}
	// 取消预约
	.cancleappoint{
		justify-content: flex-end;
		button{
			width: 152rpx;
			height: 62rpx;
			background: rgba(23,105,143,0.1);
			border-radius: 12rpx;
			border: 2rpx solid;
			border-image: linear-gradient(90deg, rgba(23, 105, 143, 1), rgba(173, 157, 246, 1), rgba(23, 105, 143, 1)) 2 2;
			font-weight: 600;
			font-size: 24rpx;
			color: #126BC9;
		}
	}
	.two{
		margin-top: 36rpx;
		align-items: flex-start;
		span{
			justify-content: flex-start;
			font-weight: 600;
			font-size: 32rpx;
			color: #000000;
		}
		.two_all{
			align-items: flex-start;
			justify-content: center;
			width: 690rpx;
			height: 136rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			.txt1{
				margin-left: 24rpx;
				
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
			}
			.txt2{
				margin-left: 24rpx;
				margin-top: 20rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
			}
		}
	}
	
</style>
